<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 添加 favicon 引用，若没有图标文件可移除该标签 -->
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
    <title>银行系统</title>
    <!-- 替换为本地 Tailwind CSS 文件 -->
<link href="/static/css/tailwind.css" rel="stylesheet">
    <style>
        .content-auto {
            content-visibility: auto;
        }
        .bg-bank-gradient {
            background: linear-gradient(135deg, #1a56db 0%, #3b82f6 100%);
        }
        .card-shadow {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .nav-link {
            display: flex;
            align-items: center;
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
            padding-top: 0.75rem; /* py-3 */
            padding-bottom: 0.75rem; /* py-3 */
            color: #4b5563; /* text-gray-600 */
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
        }
        .nav-link:hover {
            background-color: #eff6ff; /* hover:bg-blue-50 */
            color: #1a56db; /* hover:text-primary 假设 primary 为 #1a56db */
        }
        .nav-link.active {
            background-color: #eff6ff; /* bg-blue-50 */
            color: #1a56db; /* text-primary 假设 primary 为 #1a56db */
            border-left-width: 4px; /* border-l-4 */
            border-left-color: #1a56db; /* border-primary 假设 primary 为 #1a56db */
        }
        .btn-primary {
            background-color: #1a56db; /* bg-primary 假设 primary 为 #1a56db */
            color: white;
            font-weight: 500; /* font-medium */
            padding-top: 0.5rem; /* py-2 */
            padding-bottom: 0.5rem; /* py-2 */
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
            border-radius: 0.5rem; /* rounded-lg */
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
        }
        .btn-primary:hover {
            background-color: rgba(26, 86, 219, 0.9); /* hover:bg-primary/90 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
        }
        .btn-secondary {
            background-color: white;
            border-width: 1px;
            border-color: #d1d5db; /* border-gray-300 */
            color: #374151; /* text-gray-700 */
            font-weight: 500; /* font-medium */
            padding-top: 0.5rem; /* py-2 */
            padding-bottom: 0.5rem; /* py-2 */
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
            border-radius: 0.5rem; /* rounded-lg */
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
        }
        .btn-secondary:hover {
            background-color: #f9fafb; /* hover:bg-gray-50 */
        }
        .input-field {
            width: 100%;
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
            padding-top: 0.5rem; /* py-2 */
            padding-bottom: 0.5rem; /* py-2 */
            border-width: 1px;
            border-color: #d1d5db; /* border-gray-300 */
            border-radius: 0.5rem; /* rounded-lg */
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
        }
        .input-field:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.5); /* focus:ring-2 focus:ring-primary/50 */
            border-color: #1a56db; /* focus:border-primary */
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 登录页面 -->
    {% block login %}{% endblock %}

    <!-- 管理员仪表盘 -->
    {% block admin_dashboard %}{% endblock %}

    <!-- 客户仪表盘 -->
    {% block client_dashboard %}{% endblock %}

    <script>
        // 通用脚本
        // 登录表单提交
        const loginForm = document.getElementById('login-form');
        if (loginForm) {
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const account = document.getElementById('account');
                const password = document.getElementById('password');
                if (account && password) {
                    const accountValue = account.value;
                    const passwordValue = password.value;
                    // 模拟登录验证
                    if ((accountValue === '123456' && passwordValue === '888888') ||
                        (accountValue.startsWith('10103576') && passwordValue === '888888')) {
                        // 管理员或客户登录成功
                        const loginPage = document.getElementById('login-page');
                        if (loginPage) {
                            loginPage.classList.add('hidden');
                        }
                        if (accountValue === '123456') {
                            const adminDashboard = document.getElementById('admin-dashboard');
                            if (adminDashboard) {
                                adminDashboard.classList.remove('hidden');
                                initDepositChart();
                            }
                        } else {
                            const clientDashboard = document.getElementById('client-dashboard');
                            if (clientDashboard) {
                                clientDashboard.classList.remove('hidden');
                            }
                        }
                    } else {
                        // 登录失败提示
                        alert('账号或密码错误，请重新输入');
                    }
                }
            });
        }

        // 管理员退出登录
        const adminLogout = document.getElementById('admin-logout');
        if (adminLogout) {
            adminLogout.addEventListener('click', function() {
                const adminDashboard = document.getElementById('admin-dashboard');
                const loginPage = document.getElementById('login-page');
                if (adminDashboard) {
                    adminDashboard.classList.add('hidden');
                }
                if (loginPage) {
                    loginPage.classList.remove('hidden');
                }
            });
        }

        // 客户退出登录
        const clientLogout = document.getElementById('client-logout');
        if (clientLogout) {
            clientLogout.addEventListener('click', function() {
                const clientDashboard = document.getElementById('client-dashboard');
                const loginPage = document.getElementById('login-page');
                if (clientDashboard) {
                    clientDashboard.classList.add('hidden');
                }
                if (loginPage) {
                    loginPage.classList.remove('hidden');
                }
            });
        }

        // 初始化存款类型分布图表
        function initDepositChart() {
            const depositChart = document.getElementById('depositChart');
            if (depositChart) {
                const ctx = depositChart.getContext('2d');
                new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: ['活期', '定期一年', '定期二年', '定期三年', '定活两便', '零存整取一年', '零存整取二年', '零存整取三年'],
                        datasets: [{
                            data: [30, 15, 10, 10, 5, 10, 10, 10],
                            backgroundColor: [
                                '#1a56db', '#3b82f6', '#60a5fa', '#93c5fd',
                                '#bfdbfe', '#dbeafe', '#f0f9ff', '#f8fafc'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    boxWidth: 12,
                                    padding: 20,
                                    font: {
                                        size: 11
                                    }
                                }
                            },
                            title: {
                                display: false
                            }
                        },
                        cutout: '65%'
                    }
                });
            }
        }

        // 管理员导航链接点击事件
        const adminNavLinks = document.querySelectorAll('#admin-dashboard .nav-link');
        if (adminNavLinks.length > 0) {
            adminNavLinks.forEach(link => {
                link.addEventListener('click', function() {
                    // 移除所有激活状态
                    adminNavLinks.forEach(l => {
                        l.classList.remove('active');
                    });
                    // 添加当前激活状态
                    this.classList.add('active');

                    // 隐藏所有内容区域
                    const adminContentDivs = document.querySelectorAll('#admin-dashboard > main > div');
                    if (adminContentDivs.length > 0) {
                        adminContentDivs.forEach(div => {
                            div.classList.add('hidden');
                        });
                    }

                    // 显示对应内容区域
                    const targetId = this.getAttribute('href');
                    if (targetId !== '#admin-dashboard') {
                        const targetDiv = document.querySelector(targetId);
                        if (targetDiv) {
                            targetDiv.classList.remove('hidden');
                        }
                    }
                });
            });
        }

        // 客户导航链接点击事件
        const clientNavLinks = document.querySelectorAll('#client-dashboard .nav-link');
        if (clientNavLinks.length > 0) {
            clientNavLinks.forEach(link => {
                link.addEventListener('click', function() {
                    // 移除所有激活状态
                    clientNavLinks.forEach(l => {
                        l.classList.remove('active');
                    });
                    // 添加当前激活状态
                    this.classList.add('active');

                    // 隐藏所有内容区域
                    const clientContentDivs = document.querySelectorAll('#client-dashboard > main > div');
                    if (clientContentDivs.length > 0) {
                        clientContentDivs.forEach(div => {
                            div.classList.add('hidden');
                        });
                    }

                    // 显示对应内容区域
                    const targetId = this.getAttribute('href');
                    if (targetId !== '#client-dashboard') {
                        const targetDiv = document.querySelector(targetId);
                        if (targetDiv) {
                            targetDiv.classList.remove('hidden');
                        }
                    }
                });
            });
        }

        // 注册表单处理
        const registerForm = document.getElementById('register-form');
        if (registerForm) {
            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const username = document.getElementById('username');
                const pid = document.getElementById('pid');
                const phone = document.getElementById('phone');
                const password = document.getElementById('password');
                if (username && pid && phone && password) {
                    const usernameValue = username.value;
                    const pidValue = pid.value;
                    const phoneValue = phone.value;
                    const passwordValue = password.value;

                    fetch('/register/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRFToken': getCookie('csrftoken')
                        },
                        body: `username=${usernameValue}&pid=${pidValue}&phone=${phoneValue}&password=${passwordValue}`
                    })
                   .then(response => response.json())
                   .then(data => {
                        if (data.success) {
                            alert('注册成功，请登录');
                            window.location.href = "{% url 'login' %}";
                        } else {
                            alert(data.message || '注册失败，请检查输入信息');
                        }
                    })
                   .catch((error) => {
                        console.error('Error:', error);
                        alert('注册失败，请稍后再试');
                    });
                }
            });
        }

        // 获取 CSRF token 的函数
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    </script>
</body>
</html>